<script setup>
import uQRCode from '@/utils/uqrcode.js' //引入uqrcode.js
import { onLoad } from '@dcloudio/uni-app'
import { ref, onMounted, getCurrentInstance } from 'vue'

const instance = getCurrentInstance()
const componentThis = instance.ctx
const tabList = [{ name: '全部' }, { name: '已使用' }, { name: '已过期' }]
const tabChange = (data) => {
  console.log(data, '5===')
}
// 生成二维码
const createQRCode = async (text) => {
  uQRCode.make({
    canvasId: 'myCanvas',
    componentInstance: componentThis,
    text,
    size: 200,
    margin: 0,
    backgroundColor: '#ffffff',
    foregroundColor: '#000000',
    fileType: 'jpg',
    errorCorrectLevel: uQRCode.errorCorrectLevel.H,
    success: (res) => {
      console.log(res, '25===')
    },
  })
}

onMounted(() => {
  const content = '21212121' // 要生成二维码的内容
  createQRCode(content)
})
</script>

<template>
  <view class="gift-coupons" ref="giftRef">
    <fes-tabs
      @change="tabChange"
      type="line"
      :data="tabList"
      :height="120"
    ></fes-tabs>
    <scroll-view scroll-y="true" class="coupons-list">
      <view class="coupons-item" v-for="(item, index) in 10" :key="index">
        <image
          :class="index % 2 == 1 ? 'gray' : ''"
          src="https://img.js.design/assets/img/669ab24bd8604884273f9728.png#f4677049e2b217581d032a9b2b9f36da"
          mode="aspectFill"
        />
        <view class="info">
          <view class="name">10元优惠券</view>
          <view class="rule">满50元可使用</view>
          <view class="date">使用日期：2024.7.23—2024.8.1</view>
        </view>
        <view class="btn" v-if="index % 2 == 0">去使用</view>
        <view class="btn disabled-btn" v-else>去使用</view>
      </view>
    </scroll-view>
    <!-- 填写地址弹窗 -->
    <view v-if="false" class="address-modal">
      <view class="info-view">
        <image
          src="https://img.js.design/assets/img/669b66615d34982d2008f6c2.png#ee6600412ea9b5ddd22318436d36d23b"
          mode="aspectFill"
        />
        <view class="btn">提交</view>
        <view class="close">
          <image
            src="../../static/images/common/close.png"
            mode="aspectFill"
          />
        </view>
        <view class="form">
          <input class="info-input" placeholder="请输入收件人姓名" />
          <input class="info-input" placeholder="请输入收件人手机号" />
          <input class="info-input" placeholder="请输入收件地址" />
        </view>
      </view>
    </view>
    <!-- 二维码弹窗 -->
    <view class="qrcode-modal">
      <view class="content">
        <view class="qrcode-view">
          <canvas canvas-id="myCanvas" class="my-canvas"></canvas>
          <view class="code">123 456 789 012 3456</view>
        </view>
        <view class="close">
          <image
            src="../../static/images/common/close.png"
            mode="aspectFill"
          />
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.gift-coupons {
  height: 100vh;
  background: #ededed;
  .coupons-list {
    width: 100%;
    height: calc(100vh - 120rpx);
    box-sizing: border-box;
    padding: 40rpx;
    .coupons-item {
      display: flex;
      align-items: center;
      margin-bottom: 20rpx;
      padding: 24rpx;
      border-radius: 20rpx;
      background: #ffffff;
      box-shadow: 0px 4px 16px #f2f2f2;
      image {
        width: 160rpx;
        height: 140rpx;
        flex-shrink: 0;
      }
      .info {
        flex: 1;
        .name {
          margin-bottom: 4rpx;
          font-size: 28rpx;
          font-weight: 500;
          color: #333333;
        }
        .rule,
        .date {
          margin-bottom: 4rpx;
          font-size: 24rpx;
          font-weight: 400;
          color: #666666;
        }
      }
      .btn {
        padding: 6rpx 20rpx;
        border-radius: 132rpx;
        background: linear-gradient(130.92deg, #ffa545 0%, #ff4a62 100%);
        border: 1px solid #ffe6e6;
        font-size: 24rpx;
        font-weight: 900;
        color: #ffffff;
      }
      .disabled-btn {
        background: #c7c5c5;
        border: 1px solid #cccaca;
      }
    }
  }
}

// 地址弹窗
.address-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  .info-view {
    position: relative;
    image {
      width: 492rpx;
      height: 560rpx;
    }
    .form {
      position: absolute;
      top: 170rpx;
      left: 70rpx;
      width: 350rpx;
      // border: 1px solid red;
      .info-input {
        box-sizing: border-box;
        padding-left: 20rpx;
        width: 100%;
        height: 66rpx;
        background: #f5f5f5;
        margin-bottom: 24rpx;
        font-size: 24rpx;
        font-weight: 400;
      }
      // ::v-deep {
      //   .placeholder {
      //     color: #666666;
      //     font-size: 24rpx;
      //     font-weight: 400;
      //   }
      // }
    }
  }
  .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 40rpx auto 50rpx;
    width: 436rpx;
    height: 100rpx;
    border-radius: 132rpx;
    background: linear-gradient(130.92deg, #ffa545 0%, #ff4a62 100%);
    border: 8rpx solid #ffe6e6;
    font-size: 48rpx;
    font-weight: 700;
    color: #ffffff;
  }
  .close {
    margin: auto;
    width: 64rpx;
    height: 64rpx;
    image {
      width: 100%;
      height: 100%;
    }
  }
}

// 二维码弹窗
.qrcode-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  .content {
    .qrcode-view {
      width: 560rpx;
      height: 570rpx;
      left: 49px;
      border-radius: 40rpx;
      background: #ffffff;
      box-sizing: border-box;
      padding: 40rpx;
      .my-canvas {
        margin: auto;
        border: 1px solid red;
        width: 400rpx;
        height: 400rpx;
      }
      .code {
        margin-top: 20rpx;
        text-align: center;
        font-size: 24rxp;
        color: #000000;
        font-weight: 500;
      }
    }
    .close {
      margin: 50rpx auto 0;
      width: 64rpx;
      height: 64rpx;
      image {
        width: 100%;
        height: 100%;
      }
    }
  }
}

// 图片置灰
.gray {
  filter: grayscale(100%);
}
.limit2 {
  overflow: hidden;
  word-break: break-all;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  line-clamp: 2;
  white-space: nowrap;
}
.limit3 {
  overflow: hidden;
  word-break: break-all;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  line-clamp: 3;
  white-space: nowrap;
}
</style>
